<template>
  <view class="housingData">
    <!-- 列表显示的tag -->
    <view class="filterTags">
      <span
        :class="['filter-item', checkValue.includes(item.value) || item.check ? 'active-item' : 'filter-item']"
        v-for="(item, index) in showTagList"
        :key="index"
        @click="handleFilterTags(index, item)"
      >
        <span> {{ item.title }}</span>
        <template v-if="item.type != 'check'">
          <uv-icon name="arrow-down-fill" size="8" :color="item.check ? theme : '#696969'"></uv-icon>
        </template>
      </span>
    </view>

    <!-- 房源数据 -->
    <view class="housing-list">
      <cu-empty v-if="housingList.length == 0" mode="data" text="暂时没有合适的空闲房源"> </cu-empty>
      <view class="housing-item" v-for="(item, index) in housingList" :key="index" @click="handleVideoDetail(item)">
        <view class="housing-left">
          <image object-fit="cover" :controls="false" :show-center-play-btn="false" :src="item.video_cover"></image>
          <image class="tab-video" :src="$CDN('/customer/static/images/icons/has-video.png')" />
        </view>
        <view class="housing-right">
          <view class="room_main_info">{{ item.room_main_info }}</view>
          <view class="room_sub_info">{{ item.room_sub_info }}</view>
          <view class="room_tag"></view>
          <view class="show_price">
            <span class="price_num">{{ item.show_price }}</span>
            <span class="price_unit">元/间/月</span>
          </view>
        </view>
      </view>
    </view>
    <!-- popup 显示的数据 -->
    <uv-popup ref="popup" round="12" :closeOnClickOverlay="false">
      <view class="popup-container">
        <view class="popup-header">
          <view class="left"></view>
          <p class="center">房源筛选</p>
          <view class="right">
            <uv-icon class="right" name="close" @click="popupClose"></uv-icon>
          </view>
        </view>
        <view class="popup-main">
          <view class="fliter-list">
            <view class="fliter-item fliter-date">
              <view class="fliter-title">
                <text>租金预算</text>
                <text class="range-value">{{ popupValue.rangeValue[0] }}-{{ popupValue.rangeValue[1] === 10000 ? '不限' : popupValue.rangeValue[1] + '元' }} </text>
              </view>
              <range-slider
                :value="popupValue.rangeValue"
                :min="slideMin"
                :max="slideMax"
                :step="slideStep"
                :bar-height="barHeight"
                :block-size="blockSize"
                :background-color="backgroundColor"
                :tipVisible="false"
                :format="format"
                @change="handleRangeChange"
              />
            </view>
            <view v-for="(item, index) in popupTagList" :key="index" class="fliter-item">
              <view v-if="item.name != 'towards'" class="fliter-title">{{ item.title }}</view>
              <view class="tag-list">
                <view
                  v-for="(items, indexs) in item.list"
                  :key="indexs"
                  :class="['tag-item', popupValue[item.field || item.name] && popupValue[item.field || item.name].includes(items.value) ? 'acitve-tag' : 'tag-item']"
                  @click="handleSelectTag(item, items)"
                >
                  {{ items.title }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="button-wrap">
          <view class="cancel" @click="reset">重置</view>
          <view class="button" @click="submitTags">我选好了</view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
import rangeSlider from '@/components/range-slider'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'componentName',
  components: {
    rangeSlider,
  },
  mixins: [],
  props: {
    filterTags: {
      type: Array,
      default: () => [],
    },
    housingList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      price: '',
      isReset: false,
      checkValue: [],
      popupValue: {
        rangeValue: [0, 10000],
        structure: [],
        // facility: [],
        towards: [],
        when_checkin: [],
        time_checkin: [],
      },
      copyData: {},
      //  时间组件参数
      // rangeValue: [0, 10000],
      slideMin: 0,
      slideMax: 10000,
      slideStep: 100,
      barHeight: 8,
      blockSize: 24,
      userCountNumber: 222,
      backgroundColor: '#F0F0F0',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
    showTagList() {
      let facilityData = this.filterTags.find((v) => {
        return v.name === 'facility'
      })
      const facility = facilityData.list.map((v) => {
        return { ...v, type: 'check', key: 'facility' }
      })
      let rent = { title: '租金', type: 'popup', key: 'rent', check: false }
      let structure = { title: '户型', type: 'popup', key: 'structure', check: false }
      let towards = { title: '朝向', type: 'popup', key: 'towards', check: false }
      return [...facility, rent, structure, towards]
    },
    popupTagList() {
      // console.log('this.filterTags', this.filterTags)
      // 意向户型
      const structure = this.filterTags.find((v) => {
        return v.name === 'structure'
      })
      // 房间配套
      // const facility = this.filterTags.find((v) => {
      //   return v.name === 'facility'
      // })
      // 朝向
      const towards = this.filterTags.find((v) => {
        return v.name === 'towards'
      })
      // 入住时间
      const whenCheckin = this.filterTags.find((v) => {
        v.selected = []
        return v.name === 'whenCheckin'
      })
      // 意向租期
      const timeCheckin = this.filterTags.find((v) => {
        v.selected = []
        return v.name === 'timeCheckin'
      })
      // console.log('11233', [structure, towards, whenCheckin, timeCheckin])
      return [structure, towards, whenCheckin, timeCheckin]
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    handleFilterTags(index, item) {
      if (item.type === 'check') {
        if (this.checkValue.includes(item.value)) {
          const index = this.checkValue.indexOf(item.value)
          if (index > -1) {
            this.checkValue.splice(index, 1)
          }
        } else {
          this.checkValue.push(item.value)
        }
        this.$emit('emit-change', { facility: this.checkValue, ...this.popupValue })
      } else {
        this.$refs.popup.open('bottom')
        this.isReset = false
      }
    },
    handleSelectTag(item, items) {
      console.log('item, items', item, items)
      if (this.popupValue[item.field || item.name].includes(items.value)) {
        const index = this.popupValue[item.field || item.name].indexOf(items.value)
        if (index > -1) {
          this.popupValue[item.field || item.name].splice(index, 1)
        }
      } else {
        // 这块没有特殊要求，直接判断了 如果有这个 input_field 为单选
        if (item.input_field) {
          this.popupValue[item.field || item.name] = [items.value]
        } else {
          this.popupValue[item.field || item.name].push(items.value)
        }
      }
    },
    handleVideoDetail({ room_id, project_id }) {
      this.$ROUTE.go('/pages/subpackage/housing-resources/room-detail/index', { type: 'v2', id: room_id, projectId: project_id })
    },
    popupClose() {
      if (this.isReset) {
        this.popupValue = this.copyData
      }
      this.$refs.popup.close()
    },
    reset() {
      this.isReset = true
      this.copyData = { ...this.popupValue }
      this.popupValue = {
        rangeValue: [0, 10000],
        structure: [],
        // facility: [],
        towards: [],
        when_checkin: [],
        time_checkin: [],
      }
    },
    submitTags() {
      this.isReset = false
      for (let key in this.popupValue) {
        if (this.popupValue[key] && this.popupValue[key].length) {
          this.showTagList.forEach((v, i) => {
            if (v.key === key) {
              v.check = true
            }
          })
        } else {
          this.showTagList.forEach((v, i) => {
            if (v.key === key) {
              v.check = false
            }
          })
        }
      }
      this.$forceUpdate()
      this.$emit('emit-change', { facility: this.checkValue, ...this.popupValue })
      this.popupClose()
    },
    format(value) {
      return value
    },
    handleRangeChange(e) {
      this.popupValue.rangeValue = e
    },
  },
}
</script>

<style lang="scss" scoped>
.housingData {
  //   margin: 16rpx;
  margin-bottom: 40px;
  .filterTags {
    display: flex;
    flex-wrap: wrap;
    padding-top: 32rpx;
    background: white;
    margin: 0 16rpx;
    padding: 16rpx 7rpx 16rpx 8rpx;
    .filter-item {
      padding: 8rpx 24rpx;
      font-size: 24rpx;
      background-color: #f5f5f5;
      color: #666;
      border-radius: 16rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
      display: flex;
      align-items: center;
      &:last-child {
        margin-right: 0;
      }
    }
    .active-item {
      background: #edf5f9;
      color: $uv-primary;
      font-weight: bold;
    }
  }
  .housing-list {
    // width: 100%;
    margin: 0 16rpx;
    box-sizing: border-box;
    padding: 16rpx 0rpx 32rpx 0rpx;
    background: white;
    .housing-item {
      display: flex;
      // margin-bottom: 20rpx;
      margin: 0 24rpx 24rpx;
      .housing-left {
        width: 180rpx;
        height: 250rpx;
        border-radius: 16rpx;
        position: relative;
        overflow: hidden;
        image,
        video {
          width: 100%;
          height: 100%;
        }
        .tab-video {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          left: 16rpx;
          top: 16rpx;
        }
      }
      .housing-right {
        margin-left: 24rpx;
        .room_main_info {
          margin-top: 10rpx;
          font-weight: 600;
          font-size: 14px;
          color: #222222;
        }
        .room_sub_info {
          font-size: 20rpx;
          margin: 20rpx 0 20rpx;
        }
        .show_price {
          font-size: 34rpx;
          color: $uv-primary;
          .price_unit {
            margin-left: 8rpx;
            font-size: 20rpx;
            color: #999999;
          }
        }
      }
    }
  }
}
.popup-container {
  width: 100%;
  max-height: 1254rpx;
  box-sizing: border-box;
  padding: 24rpx 47rpx 160rpx 48rpx;
  .popup-header {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0rpx;
    margin-bottom: 34rpx;
    .left {
      width: 32rpx;
      visibility: hidden;
    }
    .center {
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
    }
    .right {
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
  .popup-main {
    overflow-y: scroll;
    padding-bottom: 20px;
    .fliter-list {
      display: flex;
      flex-direction: column;
      .fliter-item {
        flex: 1;
        .fliter-title {
          font-weight: 500;
          font-size: 14px;
          color: #222222;
          margin-top: 48rpx;
          margin-bottom: 24rpx;
          display: flex;
          .range-value {
            margin-left: auto;
            font-weight: 500;
            font-size: 16px;
            color: $uv-primary;
          }
        }
        .tag-list {
          display: flex;
          flex-wrap: wrap;
          .tag-item {
            width: 152rpx;
            padding: 16rpx 0rpx;
            text-align: center;
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            margin-right: 16rpx;
            margin-bottom: 16rpx;
            background: #f5f5f5;
            border-radius: 8px;
            &:nth-child(4n) {
              margin-right: 0;
            }
          }
          .acitve-tag {
            background: #edf5f9;
            color: $uv-primary;
          }
        }
      }
      .fliter-date {
        padding: 0 24rpx;
        .fliter-title {
          margin: 0;
        }
      }
    }
  }
  .button-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(100% - 32px);
    padding: 0 32rpx 32rpx;
    .cancel {
      width: 100px;

      padding: 18rpx 0;
      text-align: center;
      background: white;
      border-radius: 22px;
      border: 2rpx solid #cccccc;
      margin-right: 20rpx;
      font-weight: 400;
      font-size: 16px;
      color: #666666;
    }
    .button {
      font-weight: 400;
      font-size: 28rpx;
      padding: 18rpx 0;
      border-radius: 200rpx;
      text-align: center;
      width: 100%;
      font-size: 28rpx;
      font-weight: bold;
      color: #ffffff;
      background: $uv-primary;
    }
  }
}
</style>
